<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>景点地标搜索</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <style type="text/css">
        #container{
            width:100%;
            height:94%;
        }
        #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e27195e43f8628bcda450fcf8f5ec924"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>

<form action="/HTML/searchResultByLandmark" method="post" id="sb">
    <div>
        <input type="hidden" name="a" value="" id="a">
        <input type="hidden" name="b" value="" id="b">
    </div>
    <div>
        <input type="hidden" name="keyword" th:value="${landmark}" id="keyword">
    </div>
</form>

<!--<div style="position:fixed;bottom: 0">-->
    <!--<h3>我们已在地图上标记了您搜索的地点的结果，您可以点击标记查看详情，或者点击标记附近为您搜索附近酒店</h3>-->
<!--</div>-->
<script type="text/javascript">
    var longitude;
    var latitude;
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    var s=document.getElementById("keyword").value;
//    var s='国立大厦';
    AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
            city:"成都",
            map: map, // 展现结果的地图实例
//            extension:'all', //默认base基础信息
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true ,// 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            pageSize:1
        });
        //关键字查询
        placeSearch.search(s,function (status,result) {

            console.log(result)
            var pois = result.poiList.pois;
            for(var i = 0; i < pois.length; i++) {
                var poi = pois[i];
                var str = poi.location.toString().split(",");
                longitude= str[0];
                latitude=str[1];
                document.getElementById("a").value = longitude;
                document.getElementById("b").value = latitude;
                var form1 = document.getElementById("sb");
                form1.submit();
            }
        });
//        alert("我们已在地图上标记了您搜索的地点的结果，您可以点击标记查看详情，或者点击标记附近为您搜索附近酒店");
    });
//    var clickHandler = function() {
//        document.getElementById("a").value=e.lnglat.getLng() ;
//        document.getElementById("b").value=e.lnglat.getLat();
//        var form1=document.getElementById("sb");
//        form1.submit();
//    };
//
//    // 绑定事件
//    marker.on('click', clickHandler);
</script>
</body>
</html>